<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网络字体兼容性写法(web fonts compatibility writing)</title>
  <!-- 
    CSS中Web字体（Web Fonts）的兼容性写法是指如何确保在不同浏览器和设备上正确显示自定义字体。
    以下是关于CSS中Web字体兼容性写法的要点： 
 
      1. 多种字体格式：为确保兼容性，通常会提供多种字体格式的字体文件，如TrueType（.ttf）、OpenType（.otf）、WOFF（Web Open Font Format）和WOFF2等。 
      2. 字体加载顺序：为了确保在某些浏览器不支持某种格式的字体时能够降级显示其他格式的字体，可以按照顺序列出多种格式的字体文件路径。 
      3. 字体声明：在使用 @font-face 规则引入Web字体时，需要明确声明字体的名称、路径和格式，以及设置 font-family 属性来指定字体族名称。 
      4. 字体兼容性检测：在使用Web字体时，建议进行兼容性测试，确保在各种浏览器和操作系统下都能正确显示自定义字体。 
      5. 字体备选方案：为了应对某些情况下无法加载自定义字体的问题，可以设置通用字体族作为备选方案，如serif、sans-serif、monospace等。 
   -->
   <style>
     @font-face {
       /* 字体名称 */
       font-family: "web-fonts-compatibility-writing";
       /* 字体路径 */
       src: url("./fonts02/AaQingHuanYuanTi.eot"); /* IE9+ */
       src: url("./fonts02/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
            url("./fonts02/AaQingHuanYuanTi.woff") format("woff"), /* chrome、firefox */
            url("./fonts02/AaQingHuanYuanTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url("./fonts02/AaQingHuanYuanTi.svg#AaQingHuanYuanTi") format("svg"); /* iOS 4.1- */

       /* 字体格式 */
       font-style: normal;
       font-family: 400;
     }

     body {
       font-family: "web-fonts-compatibility-writing", sans-serif;
     }
   </style>
</head>
<body>

  <span>CSS中Web字体（Web Fonts）的兼容性写法是指如何确保在不同浏览器和设备上正确显示自定义字体。</span>
  
</body>
</html>